<template>
  <div class="mr-root">
    <nav>
      <img src="http://qiniu.kuaikanmanhua.com/static/img/we/ico-face_4311cd1.jpg" alt="">
      <h1>欢迎大大</h1>
    </nav>
    <p class="p">
      <router-link to="login">登录</router-link>
    </p>
    <div class="content">
      <form action="">
        <div class="content-div">
          <label for="">邮箱</label>
          <input type="email" required autocomplete="off" placeholder="亲请输入你的邮箱" @click="email" name="email">
        </div>
        <div class="message">亲请输入有效的邮箱地址</div>
        <div class="content-div">
          <label for="">密 码</label>
          <input type="password" required pattern="^[\w]{6,16}$" autocomplete="off" name="password" placeholder="亲请输入密码" @click="password">
        </div>
        <div class="message">亲请输入6~16，来设置你的密码</div>
        <div class="content-div">
          <label class="one">密   码 </label>
          <input type="password" required pattern="^[\w]{6,16}$" autocomplete="off" name="repassword" placeholder="亲请从新在输入一次密码" @click="repassword">
        </div>
        <div class="message">亲请输入6~16，来设置你的密码</div>
        <div class="content-div">
          <button @click.prevent="login">注册</button>
        </div>
      </form>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {

      }
    },
    methods: {
      email() {
        $('.content-div').click(function () {
          $(this).next().css('opacity', 1)
        })
        $('input[name=email]').blur(function () {
          var emailReg = /^([0-9a-zA-Z])+@([0-9a-zA-Z])+\.([a-z])+$/
          if (emailReg.test($(this).val())) {
            $(this).parent().next().text('邮件地址验证通过').css('color', 'black')
          } else {
            $(this).parent().next().text('邮件地址不合法').css('color', 'red')
          
          }
        })
      },
      password() {
        $('.content-div').click(function () {
          $(this).next().css('opacity', 1)
        })
        $('input[name=password]').blur(function () {
          var passReg = /^[\w]{6,16}$/
          if (passReg.test($(this).val())) {
            $(this).parent().next().text('密码验证通过').css('color', 'black')
          } else {
            $(this).parent().next().text('亲你输入的密码貌似有一点小问题').css('color', 'red')
             
          }
        })
      },
      repassword() {
        $('.content-div').click(function () {
          $(this).next().css('opacity', 1)
        })
        $('input[name=repassword]').change(function () {
          var passVal = $('input[name=password]').val()
          if ($(this).val() == passVal) {
            $(this).parent().next().text('密码验证通过').css('color', 'black')
          } else {
            $(this).parent().next().text('亲两次输入的密码不一样').css('color', 'red')
         }
        })

      },
      login() {
        $('.content-div').click(function () {
          var emailReg = /^([0-9a-zA-Z])+@([0-9a-zA-Z])+\.([a-z])+$/
          var passReg = /^[\w]{6,16}$/
         if(emailReg.test($("input[name=email]").val())&&passReg.test($('input [name=password]').val())&&passReg.test($('input[name=repassword]').val())){
              location.href="http://localhost:8502/#/"
            }
        })
         }}
     
  }

</script>
<style scoped>
  nav {
    width: 100%;
    height: auto;
    text-align: center;
  }
  
  .p {
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
    font-size: 0.5rem;
  }
  
  .content-div {
    width: 100%;
    height: 100%;
    text-align: center;
    margin-bottom: 0.5rem;
  }
  
  nav img {
    margin-top: 1.4rem;
  }
  
  nav h1 {
    margin-top: 1rem;
  }
  
  .content {
    margin-top: 1rem;
  }
  
  label {
    font-size: 0.4rem;
  }
  
  form input {
    width: 6rem;
    height: 0.6rem;
    border-radius: 0.2rem;
  }
  
  .one {
    margin-right: 0.1rem;
  }
  
  .message {
    font-size: 0.3rem;
    margin: 0.4rem 2.5rem;
  }
  
  button {
    width: 6rem;
    height: 1rem;
    margin-left: 1rem;
    font-size: 0.5rem;
    background: sandybrown;
    border-radius: 0.4rem;
    color: white;
  }
  
  .message {
    opacity: 0;
  }
</style>